// 导入类型、接口、模块、组件、央视
import type { ColumnsType } from "antd/es/table";

import { getUserApi, deleteUserApi } from "@/services/user";
// import tableData from "../../mock/user";
// import columns from "./columns";

import { FC, useState } from "react";
import { useMount } from "ahooks";
import wofExcel from "webopenfather-excel-export";
import { useConfirm } from "@/hooks/useConfirm";

import { Form, Input, DatePicker, Button, Card, Table, Pagination } from "antd";
import { Avatar, Tag, Space } from "antd";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import AssignRole from "./components/assignRole";
import UserEdit from "./components/userEdit";

import { Container } from "./styled";

interface Props {}
const Index: FC<Props> = () => {
  // 分配角色
  const [assignRoleState, setAssignRoleState] = useState({
    state: false,
    row: {},
  });
  // 用户编辑
  const [userEditState, setUserEditState] = useState({
    state: false,
    row: {},
  });
  // 导出excel
  const onExcel = () => {
    wofExcel.download(
      "测试文件",
      ["编号", "姓名"],
      [
        { id: 1, title: "a" },
        { id: 2, title: "b" },
        { id: 3, title: "c" },
      ]
    );
  };

  const [formData, setFormData] = useState<USER.GetUserPayloadType>({
    username: "",
    card_number: "",
    role_name: "",
    date: [],
    pagenum: 1,
    pagesize: 10,
    mobile: "",
    created_at: "",
    updated_at: "",
  });
  const [tableData, setTableData] = useState({
    list: [] as USER.Item[],
    total: 0,
  });
  const onTableData = async () => {
    const { list, total } = await getUserApi(formData);
    setTableData({
      list,
      total,
    });
  };
  useMount(() => {
    onTableData();
  });

  const [onDelete] = useConfirm(deleteUserApi, onTableData);

  // 查询
  const onFinish = (value: USER.GetUserSearchType) => {
    console.log(value);
    setFormData({
      ...formData,
      ...value,
    });
    onTableData();
  };

  const onchange = (pagenum: number) => {
    setFormData({
      ...formData,
      pagenum,
    });
    onTableData();
  };

  const columns: ColumnsType<USER.Item> = [
    {
      title: "编号",
      dataIndex: "user_id",
      align: "center",
      width: 100,
    },
    {
      title: "所属角色",
      dataIndex: "role_name",
      align: "center",
      width: 150,
    },
    {
      title: "姓名",
      dataIndex: "username",
      align: "center",
      width: 150,
      ellipsis: true,
    },
    {
      title: "头像",
      dataIndex: "avatar",
      render: (_: any, record: USER.Item) => {
        return <Avatar size={32} src={record.avatar} />;
      },
      width: 150,
      align: "center",
    },
    {
      title: "卡号",
      dataIndex: "money",
      render: (_: any, row: USER.Item) => {
        return row.card_number && <Tag color="#ff4d4f">{row.card_number}</Tag>;
      },
      width: 130,
      align: "center",
    },
    {
      title: "余额",
      dataIndex: "money",
      render: (_: any, record: USER.Item) => {
        return <span>${record.money}</span>;
      },
      width: 100,
      align: "center",
    },
    {
      title: "坐标",
      render: (_: any, record: USER.Item) => {
        return (
          <span>
            {record.lng},{record.lat}
          </span>
        );
      },
      width: 160,
      align: "center",
    },
    {
      ellipsis: true,
      title: "坐标地址",
      render: (_: any, record: USER.Item) => {
        return <span>{record.address}</span>;
      },
      width: 400,
      align: "center",
    },
    {
      title: "创建于",
      dataIndex: "created_at",
      align: "center",
      width: 200,
    },
    {
      title: "更新于",
      dataIndex: "updated_at",
      align: "center",
      width: 200,
    },
    {
      width: 230,
      fixed: "right",
      title: "操作",
      render: (_: any, record: USER.Item) => {
        return (
          <Space size="middle">
            <Button
              type="primary"
              shape="circle"
              size="small"
              onClick={() => {
                setUserEditState({
                  state: true,
                  row: record,
                });
              }}
            >
              <EditOutlined />
            </Button>
            <Button
              type="primary"
              icon={<span className="iconfont icon-fenpeijiaose"></span>}
              onClick={() => {
                console.log(1111, record);
                console.log(1111, record);
                console.log(1111, record);
                setAssignRoleState({
                  state: true,
                  row: record,
                });
              }}
            ></Button>
            <Button
              type="primary"
              onClick={() => {
                //   setEditCardNumberState({
                //     isShow: true,
                //     row: record,
                //   });
              }}
              icon={<span className="iconfont icon-vipcard"></span>}
            ></Button>
            <Button
              type="primary"
              // onClick={() => navigate("/user/money")}
              icon={<span className="iconfont icon-chongzhi"></span>}
            ></Button>
            <Button
              type="primary"
              shape="circle"
              size="small"
              danger
              onClick={() => onDelete(record)}
            >
              <DeleteOutlined />
            </Button>
          </Space>
        );
      },
    },
  ];

  return (
    <Container>
      {/* 筛选 */}
      <div className="filter">
        <Form
          layout="inline"
          onFinish={onFinish}
          initialValues={{
            username: "",
            role_name: "",
            card_number: "",
          }}
        >
          <Form.Item name="username">
            <Input
              type="text"
              placeholder="请输入用户名"
              style={{ width: "260px" }}
            />
          </Form.Item>
          <Form.Item name="card_number">
            <Input
              type="text"
              placeholder="请输入会员卡"
              style={{ width: "260px" }}
            />
          </Form.Item>
          <Form.Item name="role_name">
            <Input
              type="text"
              placeholder="请输入角色名"
              style={{ width: "260px" }}
            />
          </Form.Item>
          <Form.Item name="date">
            <DatePicker.RangePicker showTime />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="primary" onClick={onExcel}>
              导出excel
            </Button>
          </Form.Item>
        </Form>
      </div>
      {/* 筛选 */}

      {/* 内容 */}
      {/* 逻辑组件 */}
      {userEditState.state && (
        <UserEdit
          userEditState={userEditState}
          onTableData={onTableData}
          setUserEditState={setUserEditState}
        />
      )}

      {assignRoleState.state && (
        <AssignRole
          assignRoleState={assignRoleState}
          onTableData={onTableData}
          setAssignRoleState={setAssignRoleState}
        />
      )}
      {/* 逻辑组件 */}
      {/* 卡片 */}
      <Card title="用户列表" extra={<Button type="primary">新建</Button>}>
        {/* 表格 */}
        <Table
          rowKey="user_id"
          scroll={{ y: 300 }}
          pagination={false}
          columns={columns}
          dataSource={tableData.list}
        />
        {/* 表格 */}

        {/* 分页 */}
        <Pagination
          total={tableData.total}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => `总 ${total} 条`}
          onChange={onchange}
        />
        {/* 分页 */}
      </Card>
      {/* 卡片 */}
      {/* 内容 */}
    </Container>
  );
};

export default Index;
